<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        查看
      </div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form ba-add-form"
        :style="'width: calc(100% - ' + state.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          :model="state.form"
          label-position="right"
          label-width="200px"
          :rules="rules"
        >
          <div v-for="(item, index) in state.form" :key="index">
            <div v-if="item.name !== '联动提示选择'">
              <el-form-item :label="item.name">
                <el-input v-model="item.value" />
              </el-form-item>
            </div>
            <div v-else>
              <FormItem
                label="是否联动"
                v-model="item.value"
                type="radio"
                :data="{
                  content: { 1: '是', 0: '否' },
                  childrenAttr: { border: true },
                }"
              />
            </div>
          </div>
          <!-- <el-form-item label="温度量程下限值" prop="lowtrange">
              <el-input
                v-model="state.form.lowtrange"
                placeholder="请输入温度量程下限值"
              />
            </el-form-item>
            <el-form-item label="温度量程上限值" prop="uptrange">
              <el-input
                v-model="state.form.uptrange"
                placeholder="请输入温度量程上限值"
              />
            </el-form-item>
            <el-form-item label="压差量程下限值" prop="lowprange">
              <el-input
                v-model="state.form.lowprange"
                placeholder="请输入压差量程下限值"
              />
            </el-form-item>
            <el-form-item label="压差量程上限值" prop="upprange">
              <el-input
                v-model="state.form.upprange"
                placeholder="请输入压差量程上限值”"
              />
            </el-form-item>
            <el-form-item label="风速量程下限值" prop="lowfrange">
              <el-input
                v-model="state.form.lowfrange"
                placeholder="请输入风速量程下限值"
              />
            </el-form-item>
            <el-form-item label="风速量程上限值" prop="upfrange">
              <el-input
                v-model="state.form.upfrange"
                placeholder="请输入设定风速量程上限值"
              />
            </el-form-item> -->
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
        <el-button type="primary" @click="closeForm"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import { useDeviceWarnSet } from "@/store/backend/DeviceM/warnSet";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { useLongRange } from "@/store/backend/DeviceM/longRange";

type Item = {
  eid: number; //设备id
  ecode: string; //设备名称 产品名称
  lowtrange: string;
  uptrange: string;
  upprange: string;
  lowprange: string;
  lowfrange: string;
  upfrange: string;
  islink: number;
};
interface Props {
  modelValue: boolean;
}
const { proxy } = useCurrentInstance(); //mitt
const LR = useLongRange();

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const closeForm = () => {
  state.form = {};
  emits("update:modelValue", false);
};

const formRef = ref<FormInstance>();
const warn = useDeviceWarnSet();
const rules = reactive<FormRules>({
  eid: [{ required: true, message: "设备ID不能为空", trigger: "blur" }],
  ecode: [{ required: true, message: "设备编号不能为空", trigger: "blur" }],
  lowtrange: [
    { required: true, message: "温度量程下限值不能为空", trigger: "blur" },
  ],
  uptrange: [
    { required: true, message: "温度量程上限值不能为空", trigger: "blur" },
  ],
  upprange: [
    { required: true, message: "压差量程上限值不能为空", trigger: "blur" },
  ],
  lowprange: [
    { required: true, message: "压差量程下限值不能为空", trigger: "blur" },
  ],
  lowfrange: [
    { required: true, message: "风速量程下限值不能为空", trigger: "blur" },
  ],
  upfrange: [
    { required: true, message: "风速量程上限值不能为空", trigger: "blur" },
  ],
});
const state: {
  labelWidth: number;
  submitLoading: boolean;
  form: any;
  options: any[];
  link: string;
} = reactive({
  labelWidth: 160,
  submitLoading: false,
  form: [],
  link: "", //环保设备维保信息链接
  options: [
    {
      label: "风速",
      value: "trange",
    },
    {
      label: "温度",
      value: "frange",
    },
    {
      label: "压强",
      value: "prange",
    },
    {
      label: "是否联动",
      value: "islink",
    },
  ],
});

const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      if (LR.opera === "edit") {
        console.log("设备edit", state.form);
        LR.editLR({ ...state.form, link: state.form.ecode }).then((res) => {
          closeForm();
          proxy.eventBus.emit("refreshLR");
        });
      } else {
        console.log("添加edit", state.form);
        LR.addLR({ ...state.form, link: state.form.ecode }).then((res) => {
          closeForm();
          proxy.eventBus.emit("refreshLR");
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
//接收来自远程配置数据
proxy.eventBus.on("overView", (data: any) => {
  console.log("overView", data);
  state.form = data;
});
onMounted(() => {});
onBeforeUnmount(() => {
  proxy.eventBus.off("overView");
});
</script>

<style scoped lang="scss">
.add-item-content {
  display: none;
}
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}
</style>
